<template>
  <div id="app" >
   <router-view></router-view>
   <!-- <router-view name='footer'></router-view> -->
  </div>
</template>

<style lang="scss">
 @import '@/lib/reset.scss';
*{
  padding: 0;margin: 0;list-style: none;
}
html{
  font-size:26.66666vw;
  @include rect(100%,100%)
}
body,#app{
   @include rect(100%,100%);
  display: flex;
  @include flex-direction(column);
  .home, .more ,.product ,.user{
     @include rect(100%,100%)
  }
  .home{
    .banner{
      overflow: auto;
      img{
        width:100%;
      }
     .van-swipe-item {
       float: left;
     }
    }
  }
  footer{
    display: flex;
    justify-content: space-around;
    height:0.5rem;
    border-top:0.01rem solid #f6f6f6;
  .router-link-active{
  @include color(red)
}
    li{
      display: flex;
      align-items: center;
      flex-direction: column;
      text-align: center;
    }
    span{
      width:0.22rem;
      height:0.22rem;
      display: block;
    }
    p{
      font-size:0.1rem;
    }
  }
}
.register{
  background: #efeff4;
  height: 100%;
  display: flex;
  flex-direction: column;
  .footer{
    height: 100%;
    width: 100%;
    font-size: 0.16rem;
    color: rgb(136, 80, 80);
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
  }
  .content{
    background: #fff;
    margin-top:1rem;
  }
  span{
      font-size:0.16rem;
      display: inline-block;
    }
    .van-field__error-message{
      color:red;
      font-size:0.14rem;
    }
  .van-field__control{
    border:0;
  }
}
.d-flex{
    display: flex;
}
.f-1{
    flex:1
}
.jc-around{
    justify-content: space-around;
}
.jc-between{
    justify-content: space-between;
}
.jc-c{
    justify-content: center;
}
.border-all{
    border: 1px solid #f7f7f7;
    border-radius: 0.08rem;
}
.border-b{
    border-bottom: 1px solid #f7f7f7
}
.border-t{
    border-top: 1px solid #f7f7f7
}
.border-white{
    border-top: 1px solid #fff
}
.border-grey{
    border-top: 1px solid #36bc7c
}
.flex-column{
    flex-direction: column
}
.items-c{
    align-items: center;
}
.m-all{
    margin: 0.05rem;
}
.m-t{
    margin-top:0.1rem
}
.m-b{
    margin-bottom:0.1rem
}
.m-l{
    margin-left:0.1rem
}
.m-r{
    margin-right: 0.1rem
}
.p-all{
    padding: 0.05rem;
}
.p-t{
    padding-top:0.1rem
}
.p-b{
    padding-bottom:0.1rem
}
.p-l{
    padding-left:0.1rem
}
.p-r{
    padding-right: 0.1rem
}
.e3{
  color: #989898
}
.grey{
    color:#36bc7c
}
.red{
    color: rgb(143, 167, 39)
}
.red-1{
 color: #f63030
}
.b-white{
  background: #fff;
}
.f-18{
    font-size:0.18rem;
}
.f-14{
    font-size:0.14rem
}
.f-12{
    font-size:0.12rem;
}
.f-10{
  font-size:0.1rem;
}
.postion-s{
    position: sticky;
}
.jc-end{
    justify-content: flex-end
}
.el-menu.el-menu--horizontal{
   border-color: #fff;
   font-size: 0.12rem;
}
.w-100{
  width: 100%
}
.h-100{
  height:100%
}
.flex-wrap{
  flex-wrap: wrap
}

</style>
